// 制作飞线图
import React, { useEffect } from "react";
import * as echarts from "echarts";
import "./sicuanMap.css";
import chongqing from "../../assetst/json/province/chongqing.json";
export default function SicuanMap() {
  useEffect(() => {
    let root = document.getElementById("root");
    root.style.cssText = "height:100vh";
    echartsInit();
  }, []);
  const echartsInit = () => {
    const lineData = [];
    lineData.push({
      fromName: "荣昌区",
      toName: "永川区",
      coords: [
        [105.594061, 29.403627],
        [105.894714, 29.348748],
      ],
      lineStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 204, 0, 0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255, 162, 0, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          width: 1.8, //线条宽度
          opacity: 0.4, //尾迹线条透明度s
          curveness: 0.25, //尾迹线条曲直度
        },
        emphasis: {
          width: 3,
          opacity: 0.5,
        },
      },
    });

    lineData.push({
      fromName: "荣昌区",
      toName: "渝北区",
      coords: [
        [105.594061, 29.403627],
        // [105.894714, 29.348748],
        [106.512851, 29.601451],
      ],
      lineStyle: {
        normal: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 204, 0, 0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255, 162, 0, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          width: 1.8, //线条宽度
          opacity: 0.4, //尾迹线条透明度s
          curveness: 0.25, //尾迹线条曲直度
        },
        emphasis: {
          width: 3,
          opacity: 0.5,
        },
      },
    });
    // 初始化
    const myChart = echarts.init(document.getElementById("map"));
    console.log(chongqing);
    // 将名字转换为经纬度
    const effectScatterData = [];
    effectScatterData.push({
      name: "荣昌区",
      value: [105.594061, 29.403627],
      symbolSize: 15,
    });
    echarts.registerMap("chongqing", chongqing);
    const option = {
      tooltip: {
        show: true,
        enterable: true,
        formatter: (val) => {
          return `<div> ${val.name}</div`;
        },
      },
      toolbox: {
        show: true,
        dataZoom: {
          show: true,
        },
      },

      //   grid: {
      //     top: "10%",
      //     left: "50%",
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     formatter: function loadData(result) {
      //       return result.name + "<br />" + result.value[3];
      //     },
      //   },
      geo: {
        show: true,
        map: "chongqing",
        roam: true, // 平移和缩放
        // projection: {}, // 自定义投影
        center: [105.594061, 29.403627], // 中心点坐标
        aspectScale: 0.75,
        zoom: 1,
        top: "20%",
        left: "10%",
        scaleLimit: {
          //设置缩放值
          min: 0.5,
          max: 3,
        },
        itemStyle: {
          //   normal: {
          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 2,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(175,238,238, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(   47,79,79, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
          //   },
        },
        emphasis: {
          disabled: false,
          label: {
            show: true,
            color: "#fff",
          },
          itemStyle: {
            areaColor: "rgba(0, 0, 1, 0.5)",
          },
        },
        label: {
          show: true,
          fontSize: 10,
          color: "#fff",
          fontFamily: "Arial",
          shadowColor: "rgba(0,1,2,0.3)",
          shadowBlur: 12,
          shadowOffsetX: 12,
          shadowOffsetY: 12,
        },
      },
      series: [
        // 设置飞线
        {
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 2,
          effect: {
            show: true,
            period: 1, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            // symbol: "image://./images/airline.png",
            symbolSize: [10, 10], //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: lineData,
        },
        // 设置点
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          colorBy: "data",
          itemStyle: {
            color: "#fff",
          },
          symbol: "circle",
          rippleEffect: {
            color: "#fff",
            number: 5,
            period: 2,
            scale: 3,
          },
          data: effectScatterData,
        },
      ],
    };
    myChart.setOption(option);
  };
  return (
    <div id="map" className="map">
      sicuanMap
    </div>
  );
}
